

$(document).ready(function(){
 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    z=0; // Il n'y pour l'instant aucune '
    $i = 0;
    y=0; // Pour 0  il n'y pas de playlist en cours de lecture'
    page =0;
    reverse = 0;
    view = 'playlist2'; // premiere page que l'on voit'
    array4 =[-80,-76,-72,-68,-64,-60,-60,-56,-52,-48,-44,-40,-36,-32,-28,-24,-20,-16,-12,-8,-4,0,4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80]; // valeur pour que ce soit la page 4
    array5 =[-57,-53,-49-45,-41,-37,-33,-29,-25,-21,-17,-13,-9,-5,-1,3,7,11,15,19,23,27,31,35,39,43,47,51,55,59];
    array3 =[-51,-47,-43,-39,-35,-31,-27,-23,-19,-15,-11,-7,-3,1,5,9,13,17,21,25,29,33,37,41,45,49,53,57,61];
    array2 =[-54,-50,-46,-42,-38,-34,-30,-26,-22,-18,-14,-10,-6,-2,2,6,10,14,18,22,26,30,34,38,42,46,50,54,58,62];
    rotate = 0; // gestion face1 et 6 
   
   
    // le document est chargÃ©
    
    $("span").click(function(){           
      
        page=$(this).attr("id");
        nbpage = page.charAt(8); // On recupere l'indice de la playlist.
        if(z == 0) // Pour le premier affichage (rien n'est en lecture)
        {  

            // on fait un explode de la variable page et on recupere le dernier caractere... 

            $('#'+page+" #f1_card"+nbpage).addClass('test');  
            //$(".face.front").fadeOut(2200);  
            //


            setTimeout(function() {
                $('.'+page).fadeIn(1500);
                },500); 

            var tracklist = $('.'+page+' ol.sc-trackslist');
            // faire un autoplay
            z++;
            currentpage = page; // current page c'est la page en cours de visionnage'
        }
        else 
        { // FAIRE DEUX CAS, 1er c'est en lecture alors c'est toujours le meme qui reste en bas et change que la playlist ( le currentpage est donc toujours la playlist en lecture) et un cas ou ce n'est pas en lecture et on efface tout et met la 'page' cliqué                                 $("."+currentpage).css('display', 'block');  
            $i = 0;
            for(var i = 0; i <7; i++)  // On parcours toutes les plalist et on regarde laquelle est en cours de lecture
            {
                 
                var playing=$('.playlist'+i).children().attr("class");
        
                if(playing == 'sc-player playing' && page != 'menu_link' ) // On regarde si c'est en lecture'
                {
                    if(page != 'playlist'+i)// Si la page sur laquelle on clique est diff de page de la playlist alors
                    { 
                        
                        $('.playlist'+i).css('display', 'block');
                        $('div.playlist'+i+' div.sc-player ol.sc-trackslist').css('display', 'none');           
                        $('div.playlist'+i+' div.sc-player ol.sc-artwork-list').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-controls').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-info').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-scrubber').css('display', 'block'); 
  
                        $('#'+page+" #f1_card"+nbpage).addClass('test');  

                        $('.'+page).css('display', 'block');
                        $('.'+page+' div.sc-player ol.sc-trackslist').css('display', 'block');           
                        $('.'+page+' div.sc-player ol.sc-artwork-list').css('display', 'none');           
                        $('.'+page+' div.sc-player div.sc-controls').css('display', 'none');           
                        $('.'+page+' div.sc-player div.sc-info').css('display', 'none');           
                        $('.'+page+' div.sc-player div.sc-scrubber').css('display', 'none'); 
                        $('#auteur_playlist'+i).css('display', 'none'); 
                        $i = 0;


                        y = 1;
                    // ON CACHE CETTE TRACKLIST                             
                    }else //autrement on affiche la page de la playlist
                    {
                        $('.playlist'+i).css('display', 'block');
                        $('div.playlist'+i+' div.sc-player ol.sc-trackslist').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player ol.sc-artwork-list').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-controls').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-info').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-scrubber').css('display', 'block'); 
                        $i = 0;

                
                    } 
             
                }
                else{ // Si elle est pas en lecture alors on cache tout les elements de la playlist
                    if(page != 'playlist'+i && page != 'menu_link')
                        $('.playlist'+i).css('display', 'none');    
                    $i++;
                    if($i == 7)
                    {
                        y=0;
                        $i = 0;
                    }
                } 
        
            }
           
            if(y != 1) // si aucune playlist est en cours alors on affiche toute la page cliqué et on efface la page actuelle
            {
                $('.'+page).css('display','block');
                if(currentpage != page)
                {
                    $("."+currentpage).css('display', 'none');
                }
                $('#'+page+" #f1_card"+nbpage).addClass('test');  

                $('.'+page+' div.sc-player ol.sc-trackslist').css('display', 'block');           
                $('.'+page+' div.sc-player ol.sc-artwork-list').css('display', 'block');           
                $('.'+page+' div.sc-player div.sc-controls').css('display', 'block');           
                $('.'+page+' div.sc-player div.sc-info').css('display', 'block');           
                $('.'+page+' div.sc-player div.sc-scrubber').css('display', 'block'); 
                currentpage = page;
                y = 0; 
                $i = 0;
            }
        } 
    });
});

$(document).on('click','.playlist1 .sc-trackslist li', function(event) { // Si tu clique sur les tracklist alors ( on fait du cas par cas j'ai pas trouvé mieux deso bb'
    $(".playlist1").css('display', 'none');   
    $('#auteur_playlist2').css('display', 'none'); 
    $('#auteur_playlist3').css('display', 'none'); 
    $('#auteur_playlist4').css('display', 'none'); 
    $('#auteur_playlist5').css('display', 'none'); 
    $('#auteur_playlist6').css('display', 'none'); 

    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist1').css('display', 'block');
    
    $('#'+page+" #f1_card"+nbpage).addClass('test');  
    $('.playlist1 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist1 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist1 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist1 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist1 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist1;
    $i = 0;
});
  
$(document).on('click','.playlist2 .sc-trackslist li', function(event) {
    $i = 0;
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist2').css('display', 'block');
    $('#'+page+" #f1_card"+nbpage).addClass('test');  
    $('.playlist2 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist2 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist2 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist2 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist2 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist2;
}); 
  
$(document).on('click','.playlist3 .sc-trackslist li', function(event) {
    $i = 0;
    $('#auteur_playlist2').css('display', 'none'); 
    $('#auteur_playlist1').css('display', 'none'); 
    $('#auteur_playlist4').css('display', 'none'); 
    $('#auteur_playlist5').css('display', 'none'); 
    $('#auteur_playlist6').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist3').css('display', 'block');
    $('#'+page+" #f1_card"+nbpage).addClass('test');  

    $('.playlist3 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist3 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist3 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist3 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist3 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist3
    
});
$(document).on('click','.playlist4 .sc-trackslist li', function(event) {
    $('#auteur_playlist2').css('display', 'none'); 
    $('#auteur_playlist1').css('display', 'none'); 
    $('#auteur_playlist3').css('display', 'none'); 
    $('#auteur_playlist5').css('display', 'none'); 
    $('#auteur_playlist6').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist4').css('display', 'block');
    $('#'+page+" #f1_card"+nbpage).addClass('test');  

    $('.playlist4 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist4 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist4 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist4 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist4 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist4;
    $i = 0;
}); 
  
$(document).on('click','.playlist5 .sc-trackslist li', function(event) {
    $('#auteur_playlist2').css('display', 'none'); 
    $('#auteur_playlist1').css('display', 'none'); 
    $('#auteur_playlist3').css('display', 'none'); 
    $('#auteur_playlist4').css('display', 'none'); 
    $('#auteur_playlist6').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist5').css('display', 'block');
    $('#'+page+" #f1_card"+nbpage).addClass('test');  

    $('.playlist5 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist5 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist5 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist5 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist5 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist5;
    $i = 0;
});
  
$(document).on('click','.playlist6 .sc-trackslist li', function(event) {
    $('#auteur_playlist2').css('display', 'none'); 
    $('#auteur_playlist1').css('display', 'none'); 
    $('#auteur_playlist4').css('display', 'none'); 
    $('#auteur_playlist5').css('display', 'none'); 
    $('#auteur_playlist3').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist6').css('display', 'block');
    $('#'+page+" #f1_card"+nbpage).addClass('test');  

    $('.playlist6 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist6 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist6 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist6 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist6 div.sc-player div.sc-scrubber').css('display', 'block'); 
    $i = 0;
    currentpage =  playlist6;
});
  
  


 
$('body').on('keydown',function(e){ // on verifie quand la personne touche le clavier pour voir la face en cours de visualisation.
    $('#experiment').css( "webkit-box-shadow","0px -0px 0px #000000"); 
          clearTimeout(t);

     var t=setTimeout(function() {
           
        
            $('#experiment').css( "webkit-box-shadow","-1px -6px 14px #000000, -4px 5px 25px #000000, 5px 11px 16px #000000");
        
        },1500);  
     
     
   t=setTimeout(function() {
           
        
            $('#experiment').css( "webkit-box-shadow","-1px -6px 14px #000000, -4px 5px 25px #000000, 5px 11px 16px #000000");
        
        },1500);  

        
    var testface = $('#f1_card'+nbpage).hasClass('test');
    $('#experiment').addClass('experimentMove');
    if(testface == true)

    {                      

        switch( e.which) {
            case 39: // droite
                break;
            case 40: //bas
                $('#'+page+" #f1_card"+nbpage).removeClass('test');  
    
    
                $('.'+page+ ' .sc-trackslist').fadeOut('medium');
                break;
            case 38: //haut
                alert(nbpage);

                $('#'+page+" #f1_card"+nbpage).addClass('test');  
                $('.'+page+ ' .sc-trackslist').fadeOut('medium');
                break;      
            case 37: //gauche
    
                break;   
        }
                 
    }
  
  
        
});
    
$('body').on('keydown',function(e){
    if(view == 'playlist1')
    {
        reverse = 1;
        switch( e.which) {
            case 39:
                rotate++;
                break;
            case 40: //bas                  
                if(rotate ==0 ) {   // on cherche en fonction du nombre de fois ou on a appuyé sur le bouton gauche/droite de la face 1 et 6 (on change de repere a chaque fois) 
                    view='playlist4'; 
                }else if(array4.indexOf(rotate)!=-1)
                {
                    view='playlist4'; 
                }else if(array2.indexOf(rotate)!=-1)
                {
                    view='playlist2'; 
                }
                else if(array3.indexOf(rotate)!=-1)
                {
                    view='playlist3'; 
                }
                else if(array5.indexOf(rotate)!=-1)
                {
                    view='playlist5'; 
                }
                rotate = 0;
                break;
            case 38: //haut
                reverse = 0;
                if(rotate ==0 ) { 
                    view='playlist2'; 
                }else if(array4.indexOf(rotate)!=-1)
                {    
                    view='playlist2';            
                }else if(array2.indexOf(rotate)!=-1)
                {    
                    view='playlist4';             
                }
                else if(array3.indexOf(rotate)!=-1)
                {
                    view='playlist5';                   
                }
                else if(array5.indexOf(rotate)!=-1)
                {
                    view='playlist3'; 
                }                    

                rotate = 0;
                break; 
              
            case 37: //gauche
                rotate--;

                break;   
        }

    }


    if(view == 'playlist2')
    {
        switch( e.which) {
            case 39:
                view='playlist5';

                break;
            case 40: //bas
                // on fait un explode de la variable page et on recupere le dernier caractere... 
                if(reverse == 0)
                {
                    rotate = 0
                    view='playlist1';

                }
                else{
                    rotate = 0;
                    view='playlist6';

                }

                break;
            case 38: //haut
               
                if(reverse == 0)
                {
                    rotate = 2;
                    view='playlist6';

                }
                else{
                    rotate = -2;
                    view='playlist1';

                }

                break;      
            case 37: //gauche
                view='playlist3'; 


                break;   
        }
alert(view);
    }

    if(view == 'playlist3')
    {
        switch( e.which) {
            case 39:
                view='playlist2';
                break;
            case 40: //bas
                if(reverse != 1)
                {
                    if( reverse == 0)

                    {
                        rotate = -1
                    }
                    else{
                        rotate = 1;
                    }            
                    view='playlist1';
                }else{
                    
                    rotate = -1;
                    view='playlist6';
                }                         
                break;
            case 38: //haut
                view='playlist6'; 
                if(reverse != 1)
                {               
                    if( reverse == 0)
                    {
                        rotate = -1
                    }
                    else{
                        rotate = 1;
                    }            
                    view='playlist6'; 
                }else{
                    if( reverse == 0)
                    {
                        rotate = -1
                    }
                    else{
                        rotate = 1;
                    } 
                    view='playlist1';

                }


                break;      
            case 37: //gauche
                          
                view='playlist4'; 


                break;   
        }
      
    }
    
    if(view == 'playlist4')
    {
        switch( e.which) {
            case 39:
                view='playlist3'; 
             
                break;
            case 40: //bas
                if(reverse != 1) {     
                    if( reverse == 0)
                    {
                        rotate = -2;
                    }
                    else{
                        rotate = 0;
                    }
                    view='playlist1'; 
                }else{
                    
                    rotate = -2;
                    view='playlist6'; 
                }


                break;
            case 38: //haut
               
                if(reverse != 1)
                {
                    rotate = 0;     
                    view='playlist6';
                }else{
                    if( reverse == 0)    // Si on est pas sur une face 'reverse' alors la face 1 est deja en rotation de 2.
                    {
                        rotate = -2
                    }
                    else{
                        rotate = 0;
                    }
                    view='playlist1'; 
                }

                break;      
            case 37: //gauche
                view='playlist5';
              
                break;   
        }

    }
    
    if(view == 'playlist5')
    {
        switch( e.which) {
            case 39:
                view='playlist4'; 

                break;
            case 40: //bas
                if( reverse == 0)
                {
                    rotate = 1;
                    view='playlist1'; 

                }
                else{
                    rotate = -1;
                    view='playlist6'; 

                }
                break;
            case 38: //haut
                if( reverse == 0)
                {
                    rotate = 1
                    view='playlist6';

                }
                else{
                    rotate = -1;
                    view='playlist1';
                }

                break;      
            case 37: //gauche
                view='playlist2';

                break;   
        }


    }

    if(view == 'playlist6')
    {
        reverse = 1;
        switch( e.which) {
            case 39:
                rotate--;
                break;
            case 40: //bas   
                reverse = 0; //sur la face6 lorsuque qu'on appuie sur bas la face n'est pas reverse'
                if(rotate ==0 ) {   // on cherche en fonction du nombre de fois ou on a appuyé sur le bouton gauche/droite de la face 1 et 6 (on change de repere a chaque fois) 
                    view='playlist4'; 
                }else if(array4.indexOf(rotate)!=-1)
                {
                    view='playlist4'; 
                }else if(array2.indexOf(rotate)!=-1)
                {
                    view='playlist2'; 
                }
                else if(array3.indexOf(rotate)!=-1)
                {
                    view='playlist5'; 
                }
                else if(array5.indexOf(rotate)!=-1)
                {
                    view='playlist3'; 

                }
                rotate = 0;
                break;
            case 38: //haut
                if(rotate ==0 ) {   // on cherche en fonction du nombre de fois ou on a appuyé sur le bouton gauche/droite de la face 1 et 6 (on change de repere a chaque fois) 
                    view='playlist2'; 
                }else if(array4.indexOf(rotate)!=-1)
                {
                    view='playlist2'; 

                }else if(array2.indexOf(rotate)!=-1)
                {
                    view='playlist4'; 

                }
                else if(array3.indexOf(rotate)!=-1)
                {
                    view='playlist3'; 

                }
                else if(array5.indexOf(rotate)!=-1)
                {
                    view='playlist5'; 

                }                   

                rotate = 0;
                break; 
              
            case 37: //gauche
                rotate++;

                break;   
        }
        



    }


});



function matrixToArray(matrix) {
    return matrix.substr(7, matrix.length - 8).split(', ');
}


function getPlayingPlaylist()
{
alert(2);
alert(view);
   if(view == 'playlist1')

    {  var lateral = [ 'playlist3','playlist5',]
         var vertical = ['playlist2','playlist6','playlist4']
      if( vertical.indexOf(page) != -1)
          {        xAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {xAngle -= 90;}
          }
          else{
              
                yAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {yAngle -= 90;}
              // on fait une rotation et apres on envoie du vertical
          }
        
        }
    
    
    if(view == 'playlist2')

    {
        var lateral = [ 'playlist3','playlist5',]
         var vertical = ['playlist1','playlist4','playlist6']
      if( vertical.indexOf(page) != -1)
          {       xAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
//              while(view!=page)
//                  {xAngle -= 90;}
          }
          else{
              
                yAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
//              while(view!=page)
//                  {yAngle -= 90;}
              // on fait une rotation et apres on envoie du vertical
          }
        
        
    }
    
    
    if(view == 'playlist3')

    {
        var lateral = [ 'playlist2','playlist4',]
         var vertical = ['playlist1','playlist5','playlist6']
      if( vertical.indexOf(page) != -1)
          {    xAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {xAngle -= 90;}
          }
          else{
              
                yAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {yAngle -= 90;}
              // on fait une rotation et apres on envoie du vertical
          }
        
    }
        
        
        if(view == 'playlist4')

    {
        var lateral = [ 'playlist3','playlist5',]
         var vertical = ['playlist1','playlist2','playlist6']
      if( vertical.indexOf(page) != -1)
          {
                   xAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {xAngle -= 90;}
          }
          else{
              
                yAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {yAngle -= 90;}
              // on fait une rotation et apres on envoie du vertical
          }
        
        
    }
    
      if(view == 'playlist5')
    { alert(8);
        var lateral = [ 'playlist2','playlist4',]
         var vertical = ['playlist1','playlist3','playlist6']
      if( vertical.indexOf(page) != -1)
          {
                   xAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {xAngle -= 90;}
          }
          else{
              
                yAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {yAngle -= 90;}
              // on fait une rotation et apres on envoie du vertical
          }
        
    }
    
     if(view == 'playlist6')

    {
        var lateral = [ 'playlist2','playlist4',]
         var vertical = ['playlist5','playlist3','playlist6']
      if( vertical.indexOf(page) != -1)
          {    xAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {xAngle -= 90;}
          }
          else{
              
                yAngle -= 90; // Mouvement vertical jusqu'a trouvé la bonne face
              while(view!=page)
                  {yAngle -= 90;}
              // on fait une rotation et apres on envoie du vertical
          }
        
        
    }
        
           
    
  document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";


} 
    
